<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Analisador de Contas</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script src="js/cufon-yui.js" type="text/javascript"></script>
        <script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
        <!-- The JavaScript -->
        <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
        <script src="js/jquery.validate.js" type="text/javascript"></script>
        <script type="text/javascript">
            Cufon.replace('.back');
        </script>
        <script>
            /* Validação login */
            $(document).ready(function() {
                $("#btnlogar").click(function(e) {
                    e.preventDefault();
                    $.ajax({
                        url: "login.php",
                        data: $("#frm-login").serialize(),
                        type: 'POST',
                        success: function(saida) {
                            data = JSON.parse(saida);
                            if (data.resp.status) {
                                document.location = data.resp.local;
                            } else {
                                alert("Login ou senha Incorreta");
                            }
                        }
                    });
                });
                
                /* Validação cadastro */
                $("#frm-cadastrar").validate({
                    rules: {
                        nome: {
                            required: true, minlength: 3
                        },
                        sobrenome: {
                            required: true, minlength: 3
                        },
                        usuario: {
                            required: true, minlength: 3, remote: "verificaUsuario.php"
                        },
                        pass: {
                            required: true, minlength: 4
                        },
                        pass_conf: {
                            required: true, minlength: 4, equalTo: "#pass"
                        },
                        email: {
                            email: true, required: true, remote: "verificaUsuario.php"
                        }
                    },
                    messages: {
                        email: {
                            required: "Campo obrigatório.",
                            email: " Digite um e-mail válido.",
                            remote: "Este email já existe"
                        },
                        nome: {
                            required: "Campo obrigatório.",
                            minlength: "Mínimo de 3 caracteres.",
                        },
                        sobrenome: {
                            required: "Campo obrigatório.",
                            minlength: "Mínimo de 3 caracteres."
                        },
                        pass: {
                            required: "Campo obrigatório.",
                            minlength: "Mínimo de 4 caracteres."
                        },
                        pass_conf: {
                            required: "Campo obrigatório.",
                            minlength: "Mínimo de 4 caracteres.",
                            equalTo: "As senhas não correspondem."
                        },
                        usuario: {
                            required: "Campo obrigatório.",
                            minlength: "Mínimo de 3 caracteres.",
                            remote: "Este usuário já existe"
                        }
                    },
                    submitHandler: function() {
                        $.ajax({
                            url: "cadastroUsuario.php",
                            data: $("#frm-cadastrar").serialize(),
                            type: 'POST',
                            success: function(saida) {
                                data = JSON.parse(saida);
                                if (data.resp.status) {
                                    alert(data.resp.mensagem);
                                    document.location = data.resp.local;
                                } else {
                                    alert("Erro ao Cadastrar. Tente novamente mais tarde");
                                }
                            }
                        });
                    }
                });
            });
        </script>

    </head>
    <body>
        <!-- TELA CADASTRO AQUI --> 
        <div class="wrapper">
            <h1>AFACT - An&aacute;lise de Contas</h1>
            <div class="content">
                <div id="form_wrapper" class="form_wrapper">
                    <form id="frm-cadastrar" class="register">
                        <h3>Registre-se</h3>
                        <div class="column">
                            <div>
                                <label>Nome:</label>
                                <input type="text" name="nome" />
                            </div>
                            <div>
                                <label>Sobrenome:</label>
                                <input type="text" name="sobrenome" />
                            </div>
                            <div>
                                <label>Senha</label>
                                <input id="pass" type="password" name="pass"/>
                            </div>
                        </div>
                        <div class="column">
                            <div>
                                <label>Usuário:</label>
                                <input type="text" name="usuario"/>
                            </div>
                            <div>
                                <label>Email:</label>
                                <input type="text" name="email"/>
                            </div>
                            <div>
                                <label>Confirma Senha:</label>
                                <input type="password" name="pass_conf" />
                                
                            </div>
                        </div>
                        <div class="bottom">
                            <div class="remember">
                                <input type="checkbox" />
                                <span>Send me updates</span>
                            </div>
                            <input type="submit" value="Registrar" />
                            <a href="index.html" rel="login" class="linkform">J&aacute; possui conta?</a>
                            <div class="clear"></div>
                        </div>
                    </form>
                    
                    <!-- TELA INICIAL AQUI --> 
                    <form id="frm-login" class="login active">
                        <h3>Login</h3>
                        <div>
                            <label>Usuário:</label>
                            <input type="text" name="usuario" />
                        </div>
                        <div>
                            <!--<label>Senha: <a href="forgot_password.html" rel="forgot_password" class="forgot linkform">Esqueceu sua Senha?</a></label>-->
                            <label>Senha:</label>
                            <input type="password" name="pass" />
                        </div>
                        <div class="bottom">
                            <div class="remember"><input type="checkbox" /><span>Mantenha-me logado</span></div>
                            <input id="btnlogar" type="submit" value="Login"></input>
                            <a href="register.html" rel="register" class="linkform">Novo por aqui? Registre-se</a>
                            <div class="clear"></div>
                        </div>
                    </form>
                    <form class="forgot_password">
                        <h3>Esqueceu a Senha</h3>
                        <div>
                            <label>Usuário ou Email</label>
                            <input type="text" />
                        </div>
                        <div class="bottom">
                            <input type="submit" value="Enviar Lembrete"></input>
                            <a href="index.html" rel="login" class="linkform">Acabou de lembrar? Entre aqui.</a>
                            <a href="register.html" rel="register" class="linkform">N&atilde;o tem uma conta?</a>
                            <div class="clear"></div>
                        </div>
                    </form>
                </div>
                <div class="clear"></div>
            </div>
        </div>

        <script type="text/javascript">
            $(function() {
                var $form_wrapper = $('#form_wrapper'),
                        $currentForm = $form_wrapper.children('form.active'),
                        $linkform = $form_wrapper.find('.linkform');
                $form_wrapper.children('form').each(function(i) {
                    var $theForm = $(this);
                    if (!$theForm.hasClass('active'))
                        $theForm.hide();
                    $theForm.data({
                        width: $theForm.width(),
                        height: $theForm.height()
                    });
                });
                setWrapperWidth();
                $linkform.bind('click', function(e) {
                    var $link = $(this);
                    var target = $link.attr('rel');
                    $currentForm.fadeOut(400, function() {
                        $currentForm.removeClass('active');
                        $currentForm = $form_wrapper.children('form.' + target);
                        $form_wrapper.stop()
                                .animate({
                                    width: $currentForm.data('width') + 'px',
                                    height: $currentForm.data('height') + 'px'
                                }, 500, function() {
                                    $currentForm.addClass('active');
                                    $currentForm.fadeIn(400);
                                });
                    });
                    e.preventDefault();
                });
                function setWrapperWidth() {
                    $form_wrapper.css({
                        width: $currentForm.data('width') + 'px',
                        height: $currentForm.data('height') + 'px'
                    });
                }

                
            });
        </script>
    </body>
</html>